<script lang='ts' setup>
import { useRouter } from 'vue-router';
import ProductBox from '../../Common/ProductBox.vue';

defineProps(['title'])


import { reactive } from 'vue'

const router = useRouter()

const form = reactive({
    name: '',
    desc: '',
    num: 1
})

const onSubmit = () => {
    // console.log('submit!')
    router.push({
        path: "/cart/confirmOrder"
    })
}

const handleChange = (value: number) => {
    console.log(value);
}

</script>
<template>
    <div class="p-5">
        <ProductBox :title="title" :back="true">
            <div class="p-20 rounded">
                <el-form :model="form" label-width="auto" style="max-width: 600px" class="mx-auto ">
                    <el-form-item label="QQ联系方式:">
                        <el-input v-model="form.name" placeholder="推荐填写QQ号，以便以后期售后维护,购买后可在服务中查看激活卡密！" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.desc" type="textarea" />
                    </el-form-item>

                    <slot />

                    <el-form-item label="数量">
                        <el-input-number v-model="form.num" :min="1" :max="100" @change="handleChange" />
                    </el-form-item>
                    <el-form-item label="价格">
                        <span class="text-red-500 text-2xl font-bold ">
                            {{ form.num * 100 }}
                        </span>
                        <span>
                            元
                        </span>
                    </el-form-item>
                    <el-form-item>
                        <el-alert title="注意" type="warning"
                            description="免责条款：因本产品是卡密时效一旦激活将无法退回拍前认真阅读购买激活默认签署软件服务协议详情官网法律声明!" show-icon />
                    </el-form-item>
                    <el-form-item class="w-full flex justify-center">
                        <el-button type="primary" @click="onSubmit" class="m-auto">去支付</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </ProductBox>
    </div>
</template>
<style lang='scss' scoped></style>